<template>
	<view class="detail-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="线索详情"></uni-navbar></view>

		<block v-if="type == 'motion'">
			<view class="detail-info" v-show="motionInfo.id">
				<view class="site-box">
					<view class="p-info">
						<view class="p-name">{{ motionInfo.createName }}</view>
						<view class="left"><image class="image" :src="$imagePreview(motionInfo.createAvatar)" mode="aspectFill"></image></view>
						<view class="right">
							<view class="p-time">时间：{{ motionInfo.createTime }}</view>
							<view class="p-phone">联系电话：{{ motionInfo.phone }}</view>
							<view class="p-no">问题编号：{{ motionInfo.opinionNo }}</view>
							<view class="p-nick">代表：{{ motionInfo.representiveName }}</view>
						</view>
					</view>
					<view class="label-info">
						<view class="item" @click="onTts()">
							<u-icon v-if="!play" class="icon" name="volume-fill" color="#09f" size="40"></u-icon>
							<u-icon v-else class="icon" name="pause-circle-fill" color="#09f" size="40"></u-icon>
							语音播报
						</view>
						<view class="item" @click="call(motionInfo.contact)">
							<u-icon class="icon" name="phone-fill" color="#0f0" size="40"></u-icon>
							拨打电话
						</view>
					</view>
				</view>
				<view class="info-detail">
					<view class="overflow"><uni-parse :content="motionInfo.content"></uni-parse></view>
				</view>
			</view>

			<view class="file-list" v-if="fileList.length > 0">
				<view>附件:</view>
				<view class="file-item" v-for="(item, index) in fileList" :key="index" @click="$showLine(item)">
					<view class="file-name clamp">{{ item.name }}</view>
					<view class="right-type">预览</view>
				</view>
			</view>
		</block>

		<block v-else>
			<view class="detail-info" v-show="willInfo.id">
				<view class="site-box">
					<view class="p-info">
						<view class="p-name">{{ willInfo.createName }}</view>
						<view class="left"><image class="image" :src="$imagePreview(willInfo.createAvatar)" mode="aspectFill"></image></view>
						<view class="right">
							<view class="p-time">时间：{{ willInfo.createTime }}</view>
							<view class="p-phone">联系电话：{{ willInfo.phone }}</view>
							<view class="p-no">问题编号：{{ willInfo.opinionNo }}</view>
							<view class="p-nick">代表：{{ willInfo.representiveName }}</view>
						</view>
					</view>
					<view class="label-info">
						<view class="item" @click="onTts()">
							<u-icon v-if="!play" class="icon" name="volume-fill" color="#09f" size="40"></u-icon>
							<u-icon v-else class="icon" name="pause-circle-fill" color="#09f" size="40"></u-icon>
							语音播报
						</view>
						<view class="item" @click="call(willInfo.phone)">
							<u-icon class="icon" name="phone-fill" color="#0f0" size="40"></u-icon>
							拨打电话
						</view>
					</view>
				</view>
				<view class="info-detail">
					<view class="overflow">
						<uni-parse :content="willInfo.opinionDescribe"></uni-parse>
						<view class="com-box">发生地点: {{ willInfo.address }}</view>
					</view>
				</view>
			</view>

			<view class="file-list" v-if="fileList2.length > 0">
				<view>附件:</view>
				<view class="file-item" v-for="(item, index) in fileList2" :key="index" @click="$showLine(item)">
					<view class="file-name clamp">{{ item.name }}</view>
					<view class="right-type">预览</view>
				</view>
			</view>

			<block v-if="willInfo.nodeStatus > 1 && willInfo.handlingResulst != 2">
				<view class="com-h2"><text class="text">问题审查</text></view>
				<view class="form-box">
					<u-form>
						<u-form-item class="form-item" label="处理意见" labelAlign="left" label-width="190">
							<view>{{ willInfo.handlingResulstName }}</view>
						</u-form-item>

						<u-form-item class="form-item" label="问题分类" labelAlign="left" label-width="190">
							<view>{{ willInfo.opinionClassifyName }}</view>
						</u-form-item>
					</u-form>
				</view>
			</block>
			<block v-if="willInfo.nodeStatus != 1 && willInfo.handlingResulst == 2">
				<view class="com-h2"><text class="text">审查结果</text></view>
				<view class="form-box">
					<u-form>
						<u-form-item class="form-item" label="处理意见" labelAlign="left" label-width="190">
							<view>{{ willInfo.handlingResulstName }}</view>
						</u-form-item>
					</u-form>
				</view>
			</block>

			<block v-if="willInfo.nodeStatus > 2 && form1.id">
				<view class="com-h2"><text class="text">问题答复</text></view>
				<view class="form-box">
					<u-form>
						<u-form-item class="form-item" label="答复时间" labelAlign="left" label-width="190">{{ form1.createTime }}</u-form-item>
						<u-form-item class="form-item" label="答复内容" labelAlign="left" label-width="190">
							<view class="text-l">{{ form1.opinion }}</view>
						</u-form-item>

						<view class="file-list" v-if="fileList3.length > 0">
							<view>附件:</view>
							<view class="file-item" v-for="(item, index) in fileList3" :key="index" @click="$showLine(item)">
								<view class="file-name clamp">{{ item.name }}</view>
								<view class="right-type">预览</view>
							</view>
						</view>
					</u-form>
				</view>
			</block>

			<block v-if="willInfo.nodeStatus > 3 && form2.id">
				<view class="com-h2"><text class="text">二次答复</text></view>
				<view class="form-box">
					<u-form>
						<u-form-item class="form-item" label="答复时间" labelAlign="left" label-width="190">{{ form2.createTime }}</u-form-item>
						<u-form-item class="form-item" label="答复内容" labelAlign="left" label-width="190">
							<view class="text-l">{{ form2.opinion }}</view>
						</u-form-item>

						<view class="file-list" v-if="fileList4.length > 0">
							<view>附件:</view>
							<view class="file-item" v-for="(item, index) in fileList4" :key="index" @click="$showLine(item)">
								<view class="file-name clamp">{{ item.name }}</view>
								<view class="right-type">预览</view>
							</view>
						</view>
					</u-form>
				</view>
			</block>

			<block v-if="willInfo.nodeStatus == 4">
				<view class="com-h2"><text class="text">问题办结</text></view>
				<view class="form-box">
					<u-form>
						<u-form-item class="form-item" label="办结时间" labelAlign="left" label-width="190">
							<view>{{ willInfo.updateTime }}</view>
						</u-form-item>

						<u-form-item class="form-item" label="办结人" labelAlign="left" label-width="190">
							<view>{{ willInfo.representiveName }}</view>
						</u-form-item>
					</u-form>
				</view>
			</block>
		</block>

		<!-- <view class="fiexd-btm" v-if="motionInfo.isAdopt == 0 && motionInfo.nodeStatus == 2 && type == 'motion' && $sysBtns('sqmy_clue_edit')">
			<u-button class="form-btn" type="error" @click="editTo">采用</u-button>
		</view>
		<view class="fiexd-btm" v-if="motionInfo.isAdopt == 0 && type == 'sqmy' && $sysBtns('sqmy_clue_edit')">
			<u-button class="form-btn" type="error" @click="editTo">采用</u-button>
		</view> -->

		<view v-if="false || hisList"></view>
	</view>
</template>

<script>
import uniParse from '@/components/uni-parse/parse.vue';
import { mapState } from 'vuex';
export default {
	components: {
		uniParse
	},
	data() {
		return {
			typeList: {},
			kindList: {
				'1': '个人建议',
				'2': '集体建议',
				'3': '联名建议'
			},
			statusMap: {
				0: '所有',
				1: '待审查',
				2: '办理中',
				3: '已答复',
				4: '已办结',
				5: '不予受理'
			},
			id: '',
			type: 'will',
			hisList: [],
			fileList: [],
			fileList2: [],
			fileList3: [],
			fileList4: [],
			motionInfo: {},
			willInfo: {},
			form: {
				type: '',
				idea: '',
				opinion: ''
			},
			form1: {
				id: '',
				createTime: '',
				opinion: ''
			},
			form2: {
				id: '',
				type: '',
				idea: '',
				createTime: '',
				opinion: ''
			},
			key: -1,
			play: false
		};
	},
	onLoad(option) {
		this.loadLogin();
		this.id = option.id;
		if (option && option.type) {
			this.type = option.type;
		}
		this.loadData();
	},
	onHide() {
		this.$ttsOff();
	},
	onUnload() {
		this.$ttsOff();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.userId = this.userInfo.sysUser.id;
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.roleCodes = this.userInfo.roleCodes.join(',');
			} else {
				this.$logout();
			}
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then(res => {
				if (!res.data) {
					return false;
				}
				res.data.forEach(item => {
					this[list][item.dictValue] = item.dictName;
				});
			});
		},
		loadData() {
			if (this.type == 'motion') {
				this.$request('/tianbanli/motion-clue/detail', {
					id: this.id,
					userId: this.userId
				}).then(res => {
					this.fileList = res.data.fileList;
					this.motionInfo = res.data.motionClue;
				});
			} else {
				this.$request('/minqingzhitong/msPublicOpinion/get', {
					id: this.id,
					userId: this.userId
				}).then(res => {
					this.fileList2 = res.data.fileList;
					this.willInfo = res.data.msPublicOpinion;
					this.hisList = res.data.msPublicOpinionHisList;
					if (this.hisList.length > 0) {
						this.form1.createTime = this.hisList[0].msPublicOpinionHis.createTime;
						this.form1.opinion = this.hisList[0].msPublicOpinionHis.opinion;
						this.form1.id = this.hisList[0].msPublicOpinionHis.id;
						this.fileList3 = this.hisList[0].hisFileList;
					}
					if (this.hisList.length > 1) {
						this.form2.createTime = this.hisList[1].msPublicOpinionHis.createTime;
						this.form2.opinion = this.hisList[1].msPublicOpinionHis.opinion;
						this.form2.id = this.hisList[1].msPublicOpinionHis.id;
						this.fileList4 = this.hisList[1].hisFileList;
					}
				});
			}
		},
		editTo() {
			if (this.type == 'motion') {
				uni.navigateTo({
					url: '/pagesB/proposal/add?type=clue&id=' + this.id
				});
			} else {
				uni.navigateTo({
					url: '/pagesB/will/add?type=clue&id=' + this.id
				});
			}
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e
			});
		},
		onTts() {
			let text = this.willInfo.createName || '';
			text += '，时间：' + this.willInfo.createTime;
			text += '，联系电话：' + this.willInfo.phone;
			text += '，问题编号：' + this.willInfo.opinionNo;
			text += '，代表：' + this.willInfo.representiveName;
			text += '，' + this.willInfo.opinionTypeName;
			text += '，' + this.willInfo.opinionDescribe;
			text += '，发生地点：' + this.willInfo.address;
			this.$tts(text, this, 500);
		},
		previewImage(idx, images) {
			uni.previewImage({
				current: idx,
				urls: images
			});
		}
	}
};
</script>

<style lang="scss">
.detail-view {
	background-color: #fff;
}

.detail-info {
	padding: 0 0 30rpx;

	.overflow {
		padding: 20rpx 30rpx 0;
	}

	.com-box {
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		font-size: 14px;
		font-weight: 500;
		color: #333;
		line-height: 40rpx;
		border-radius: 36rpx;
		background: #f6f7fb;
	}
}

.site-box {
	padding: 30rpx 30rpx 0;
	background-color: #f5f7fa;
}

.p-info {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10rpx;
	padding: 26rpx 30rpx 48rpx;
	background-color: #fff;
	border-radius: 16rpx;

	.left {
		width: 180rpx;
		height: 170rpx;
		border-radius: 12rpx;

		.image {
			width: 180rpx;
			height: 170rpx;
			border-radius: 12rpx;
		}
	}

	.p-name {
		margin-bottom: 26rpx;
		padding-bottom: 18rpx;
		width: 100%;
		font-size: 17px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
		border-bottom: 2rpx solid #f6f7fb;
	}

	.p-time,
	.p-phone,
	.p-no {
		margin-bottom: 5rpx;
	}

	.p-addr {
	}

	.right {
		flex: 1;
		width: 0;
		padding-left: 32rpx;
		font-size: 14px;
		color: #666;
		line-height: 40rpx;

		.image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

.label-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	font-size: 16px;
	color: #333;
	line-height: 44rpx;

	.item {
		padding: 20rpx 0;
		width: 50%;
		min-width: 30%;
		text-align: center;
	}

	.icon {
		margin-right: 5rpx;
		vertical-align: top;
	}
}

.site-info {
	margin-bottom: 20rpx;
	padding: 30rpx;
	font-size: 17px;
	color: #333;
	line-height: 52rpx;
	background-color: #fff;

	.h2-ttl {
		margin-bottom: 24rpx;
		font-size: 17px;
		font-weight: 600;
		color: #333;
		line-height: 48rpx;
	}
}

.node {
	margin: 20rpx 0 0 20rpx;
	font-size: 14px;
	color: #9b9b9b;
	line-height: 120rpx;
}

.sched-box {
	padding: 10rpx 50rpx;
}

.form-box {
	.form-item {
		@include mp-flex;
		// border-bottom: 20rpx solid #f5f7fa;

		.text-l {
			text-align: left;
		}
	}
}

.filter-box {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
